<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:54:52
-->
<template>
  <div>
    <div class="box-bar">
      <div class="box" v-for="(item, idx) in barList" :key="idx" @click="changeChart(idx)">
        <div class="mask" :class="idx == barChoose ? 'actived' : ''"></div>
        {{ item }}
      </div>
    </div>
    <Echart v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="265px" isClick
      @chartClick="chartClick" />
    <Reacquire v-else @onclick="getData" style="line-height: 265px">
      重新获取
    </Reacquire>
  </div>

</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
  name: 'ALeftLeftTop',
  data() {
    return {
      options: {},
      barList: ['票数', '重量', '运费'],
      countUserNumData: {
        axisData: ['燕文物流', '朝阳物流', '大金物流', '双桥物流', '湖北物流'],
        seriesData4: [68, 59, 51, 39, 30],
        seriesData3: [40, 70, 30, 20, 98],
        seriesData0: [34, 32, 31, 29, 27],
        seriesData1: [14768, 14013, 13285, 12973, 12623],
        seriesData2: [462, 436, 427, 395, 371],
      },
      chartType: 0,
      barChoose: 0,
      pageflag: true,
      timer: null,
      autoTimer: null,
      series: [],
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    autoChange() {
      // this.options.series = this.barChoose >= 2 ? this.series : this.series[this.barChoose];
      if (this.barChoose >= 2) {
        this.barChoose = 0;
      } else {
        this.barChoose += 1;
      }
      this.changeChart(this.barChoose);
    },
    autoSwitper() {
      if (this.autoTimer) {
        return;
      }
      let looper = (a) => {
        this.autoChange();
      };
      this.autoTimer = setInterval(
        looper,
        3000
      );
    },
    chartClick(params) {
      // 这里处理你的点击逻辑
      this.$emit('chartClick', params);
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    changeChart(chartType) {
      this.barChoose = chartType;
      this.options.legend.data[0] = this.barList[chartType];
      this.options.series[0].name = this.barList[chartType];
      this.init(this.countUserNumData, chartType)
    },
    getData() {
      this.pageflag = true;
      this.init(this.countUserNumData, this.barChoose);

      this.autoSwitper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData, barChoose) {
      let axisData = currentData.axisData;
      let seriesData = [
        [...currentData.seriesData0],
        [...currentData.seriesData1],
        [...currentData.seriesData2],
        [...currentData.seriesData3],
        [...currentData.seriesData4],
      ];
      const options = {
        grid: {
          top: '10%',
          left: '4%',
          right: '6%',
          bottom: '12%',
          containLabel: true,
        },
        legend: {
          show: true,
          top: '0%',
          right: '4%',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          // itemGap: 60,
          textStyle: legend.textStyle,
          data: ['万票', '万吨', '万元', '万票'],
        },
        xAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          // boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          // {
          //   show: true, // 是否展示坐标轴label
          //   // color: "#D8F0FF",
          //   color: "#FFF",
          //   fontSize: 12,
          //   // interval: "auto",
          //   rotate: 45 ,
          //   margin:-30,
          //   align: 'center', // 调整标签相对于轴的对齐方向
          //   verticalAlign: 'left' // 调整标签相对于轴的垂直对齐方向
          // },
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            // max: 8000,
            // min: 100,//
            // interval: 2000,
            axisLabel: yAxis.axisLabel,
            axisLine: {
              show: false,
              // interval: 1,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            splitLine: {
              show: true,
              // interval: 1,
              lineStyle: {
                color: ['rgba(176, 215, 255, 0.2)'],
                width: 1,
                type: 'dashed',
              },
            },
            // splitLine: {
            //   show: false,
            // },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [],
      };
      const series = [
        {
          name: (['万票', '万吨', '万元', '万票'])[this.barChoose],
          type: 'bar',
          barWidth: 20,
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(21,136,209,0.2)',
          },
          label: {
            show: false,
            position: 'top'
          },
          smooth: true,
          showSymbol: true,
          itemStyle: {
            normal: {
              // color: '#287CE8',
              // color: 'rgba(0,219,254, .7)',
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#60F5FF',
                  },
                  {
                    offset: 1,
                    color: '#3FA4FF',
                  },
                ],
                globalCoord: false,
              }
            },
          },
          data: seriesData[barChoose],
          lineStyle: {
            normal: {
              width: 2,
            },
          },
        },
      ];
      options.series = series;
      this.series = [...series];
      this.options = options;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-bar {
  width: 100%;
  display: flex;
  z-index: 999;
  // justify-content: center;
  align-items: center;
  padding-left: 20px;

  .box {
    width: 56px;
    height: 20px;
    margin: 0 2px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
    z-index: 2;

    .mask {
      position: absolute;
      width: 56px;
      height: 20px;
      z-index: 1;
      background: rgba(255, 255, 255, 0.05);
      /* 对 div 进行水平倾斜 */
      transform: skewX(-30deg);

      &.actived {
        background-color: #154FC1;
        z-index: -1;
      }
    }
  }
}
</style>
